<template>
	<div class="hello">
		
		<img src="https://source.unsplash.com/user/erondu/400x300"><br />
		<button @click="getdata()">vue-axios</button>
	<br />
	改进版：vue-cli3.6.0，vue-axios（解决跨域），vue-router，vueX，图片懒加载，点击大图，SCSS
	<br />
	<p>只引入这些插件</p>
	</div>
</template>

<script>
export default {
	name: 'HelloWorld',
	data() {
		return {
			msg: 'Welcome to Your Vue.js App',
			age: '12',
			logo: 'logo'
		};
	},
	mounted() {
		console.log(this.$store.state);
		this.$store.commit('showMe', this.msg);
		this.$store.commit('showAge', this.age);
		console.log(this.$store.state);
	},
	methods: {
		//Axios使用 使用箭头函数，不然this指针会变化
		getdata: function() {
			//  前面必须加  /api  这个是代理
			var api = '/api/simpleWeather/query?city=汕头&key=cffde7935527bd85911420cc8e46ee36';
			this.axios
				.get(api)
				// .port(api, qs.stringify(params))
				.then(res => {
					console.log(res);
					this.list = res.data.result;
					console.log(this.list);
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$color-white:green;

p{
  color: $color-white;
}
</style>